<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Bitstrip(s) - Inscription</title>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="/bitstrip/assets/css/inscription.css"/>
		<link rel="stylesheet" type="text/css" href="/bitstrip/assets/css/jquery.bxslider.css"/>
        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
	</head>
	<body>
	
		<c:if test="${from_fb == true}">
        	<div class="message-box show">Finalisez votre inscription en remplissant le formulaire ci-dessous ! (pré-rempli à partir de votre profil Facebook)</div>
       	</c:if>
       	
		<c:if test="${status.hasErrors()}"> 
			<div class="message-box error show">
				<c:forEach items="${status.getAllErrors()}" var="errorMessage">  
	            	<c:out value="${errorMessage.getDefaultMessage()}" /><br/>
	           	</c:forEach> 
			</div>
		</c:if>
		
		<div class="signup-container"> 
			<h1>BITSTRIP(s)</h1>
            
			<form:form commandName="utilisateur" id="signup-form" action="/bitstrip/inscription" method="post">
				<fieldset>
					<form:hidden path="id"/>
					<form:hidden path="version"/>
					<form:hidden path="facebook_id" />
					<form:hidden path="facebook_token" />
					<form:input path="prenom" placeholder="PRENOM" />
					<form:input path="nom" placeholder="NOM" />
					<form:input path="email" placeholder="ADRESSE E-MAIL" />
					<form:input path="login" placeholder="NOM D'UTILISATEUR" />
					<form:input path="password" id="password-input" type="password" placeholder="MOT DE PASSE" />
					<input type="hidden" name="avatar-id" id="avatar-input" />
					
					<label class="choose-avatar">Choisissez votre avatar :</label>
					<div class="avatar-slider"style="position:relative">
						<c:forEach var="avatar" items="${avatars}" >
							<div class="slide" data-avatar-id="${avatar.getId()}"><img src="/bitstrip/avatar?id=${avatar.getId()}" /></div>
						</c:forEach>
					</div>
					
                    <div class="bottom-form">
                    	<a class="button" href="/bitstrip/login.jsp">Retour</a>
					   <input name="submit" type="submit" class="validate-btn" value="M'inscrire" />
				    </div>
                </fieldset> 
			</form:form>
		</div>
        
		<script type="text/javascript" src="/bitstrip/assets/js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="/bitstrip/assets/js/cssbrowserselector.js"></script>
		<script type="text/javascript" src="/bitstrip/assets/js/jquery.bxslider.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$('.avatar-slider').bxSlider({
				slideWidth: 80,
			    minSlides: 3,
			    maxSlides: 3,
			    slideMargin: 10,
			    pager:false,
			    infiniteLoop: false
			});
			
			$('.avatar-slider .slide').click(function(){
				$('.avatar-slider .slide').removeClass('selected');
				$(this).addClass('selected');
				$('#avatar-input').val($(this).data('avatar-id'));
			});
		});
		</script>
                                    
	</body>
</html>